<template>
  <div>
    <ul>
      <li v-for="(item, index) in treeData" :key="item.id + index">
        <!------>
        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">{{ item.label}}</el-checkbox>
        <el-checkbox-group style="padding-left: 25px;" v-if="item.actionList.length > 0" v-model="checkedButtons" @change="handleCheckedButtonsChange">
          <el-checkbox v-for="button in item.actionList" :label="button.actionText" :key="button.actionCode">{{button.actionText}}</el-checkbox>
        </el-checkbox-group>
        <div v-if="item.children && item.children.length" style="padding-left: 15px;">
          <about-view :treeData="item.children"></about-view>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
const cityOptions = ['上海', '北京', '广州', '深圳']
export default {
  name: 'AboutView',
  data() {
    return {
      checkAll: false,
      checkedButtons: [],
      cities: cityOptions,
      isIndeterminate: true
    }
  },
  props: {
    treeData: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    handleCheckAllChange(val) {
      console.log('handleCheckAllChange', val)
      // this.checkedCities = val ? cityOptions : []
      this.isIndeterminate = false
    },
    handleCheckedButtonsChange(value) {
      let checkedCount = value.length
      this.checkAll = checkedCount === this.cities.length
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length
    }
  }
};
</script>
<style lang="scss" scoped>
ul {
  li {
    text-align: left;
  }
}
</style>